<script setup>
import {computed, ref} from 'vue'
import {imageFileChoice} from '@/utils/file-choice'

//定义参数
const props = defineProps(['modelValue'])

//定义发射事件
const emit = defineEmits(['update:modelValue'])

//选择的图片地址
const imgSrc = computed(() => {
  const src = props.modelValue
  return src?.path !== undefined ? src.path : src
})

//选择图片
const handleChoose = () => {
  imageFileChoice.choose().then((file) => {
    emit('update:modelValue', file)
  }).catch(() => {
  })
}
</script>

<template>
  <div class="info-img" @click="handleChoose">
    <!-- 没有图片 -->
    <template v-if="!imgSrc">
      <div class="img-box">
        <h4>选择图片</h4>
      </div>
    </template>

    <!-- 选择了图片 -->
    <template v-else>
      <image :src="imgSrc" mode="aspectFit" class="img"/>
    </template>
  </div>
</template>

<style lang="scss" scoped>
.info-img {
  width: 100%;
  @include grid-box(false, true);
  gap: $spacing-4;
  cursor: pointer;
  height: 180px;

  &:hover {
    outline: 1px $black solid;
  }
}

.img-box, .img {
  background: $light-bg;
  height: 180px;
}

.img-box {
  @include grid-box(true);
  gap: $spacing-5;
}
</style>
